<template>
<div class="adoptSKU">
  <search-block type="half">
    <template slot="button">
      <el-button type="primary" @click="queryList">查询</el-button>
      <el-popconfirm
        v-if="!isDialog"
        title="初始化SKU将会重置已编辑的SKU，请确认是否初始化？"
        @confirm="generateList">
        <el-button slot="reference" type="danger">初始化SKU</el-button>
      </el-popconfirm>

    </template>
    <el-form :model="this" label-width="100px" inline @submit.native.prevent>
      <el-form-item
        v-for="(item, index) in selectValue"
        :key="index"
        :label="item.name + '：'">
        <el-select v-model="item.select" clearable>
          <el-option
            v-for="(itemVal, index2) in item.values"
            :key="index + '_' + index2"
            :label="itemVal.name"
            :value="itemVal.value"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </search-block>
  <y-table
      v-if="isInitTable"
      border
      :get-data-way="{data: tableData}"
      :columns="columns">
    <el-table-column slot="priceOld" label="原价" align="center" header-align="center" width="100">
      <template v-slot="{row}">
        <el-input-number v-if="row.edit" :controls="false" v-model="row.priceOld" size="mini" :min="0" :step="0.01"></el-input-number>
        <span v-else>{{row.priceOld}}</span>
      </template>
    </el-table-column>
    <el-table-column slot="priceNew" label="现价" align="center" header-align="center" width="100">
      <template v-slot="{row}">
        <el-input-number v-if="row.edit" :controls="false" v-model="row.priceNew" size="mini" :min="0" :step="0.01"></el-input-number>
        <span v-else>{{row.priceNew}}</span>
      </template>
    </el-table-column>
    <el-table-column slot="stock" label="库存" align="center" header-align="center" width="100">
      <template v-slot="{row}">
        <el-input-number v-if="row.edit" step-strictly :controls="false" v-model="row.stock" size="mini" :min="0" :step="1"></el-input-number>
        <span v-else>{{row.stock}}</span>
      </template>
    </el-table-column>
    <el-table-column slot="lowStock" label="预警库存" align="center" header-align="center" width="100" :min="0" :step="1">
      <template v-slot="{row}">
        <el-input-number v-if="row.edit" step-strictly :controls="false" v-model="row.lowStock" size="mini"></el-input-number>
        <span v-else>{{row.lowStock}}</span>
      </template>
    </el-table-column>
    <el-table-column slot="y-oper" label="操作" align="center" header-align="center" width="80" fixed="right" v-if="!isView">
      <template v-slot="{row}">
        <div class="table-buttons">
          <el-button v-if="!row.edit" type="primary" size="mini" @click="editSku(row)">编辑</el-button>
          <el-button v-else type="primary" size="mini" @click="saveSku(row)">保存</el-button>
<!--          <el-popconfirm
              title="是否确认删除该条数据？"
              @confirm="delSku(row)">
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>-->
        </div>
      </template>
    </el-table-column>
  </y-table>
</div>
</template>

<script>
export default {
  name: "adoptSKU",
  props: {
    adoptId: String,
    isDialog: {
      type: Boolean,
      default: false
    },
    isView:{
      type: Boolean,
      default: false
    }
  },
  inject: {
    refreshSku:{
      default: () => {}
    }
  },
  data(){
    return{
      isInitTable: false,
      columns: [],
      selectValue: [],
      tableData: [],
      editing: null
    }
  },
  created() {
    this.isDialog && this.initTableHeader();
  },
  activated() {
    this.initTableHeader();
  },
  methods:{
    initTableHeader(){
      this.columns = [];
      this.$yAxios({
        url: this.$api.adopt.queryAdoptSpec,
        data: {
          adoptId: this.adoptId
        },
        loading: true
      }, info => {
        if(info.length){
          this.columns.push({
            label: 'SKU编码',
            prop: 'skuCode',
            width: 200
          }, ...info.map(o => ({
            label: o.specName,
            prop: o.specCode
          })));
          this.columns.push(...[{
            label: '原价',
            prop: 'priceOld',
            template: true
          },{
            label: '现价',
            prop: 'priceNew',
            template: true
          },{
            label: '库存',
            prop: 'stock',
            template: true
          },{
            label: '预警库存',
            prop: 'lowStock',
            template: true
          }])
          this.selectValue = [];
          this.isInitTable = true;
          this.$nextTick(() => {
            info.map(o => {
              if(o.children && o.children.length){
                this.selectValue.push({
                  select: '',
                  name: o.specName,
                  value: o.specCode,
                  values: o.children.map(oc => ({
                    name: oc.specName,
                    value: oc.specCode
                  }))
                });
              }
            });
            this.queryList();
          })
        }
      })
    },
    generateList(){
      this.$yAxios({
        url: this.$api.adopt.adoptSkuList,
        data:{
          adoptId: this.adoptId
        },
        loading: true
      }, info => {
        this.editing = null;
        this.tableData = info;
      });
    },
    queryList(search = true){
      let data = {
        adoptId: this.adoptId,
        specCodes: [],
      }
      if(search){
        this.selectValue.map(({select}) => {
          if(select){
            data.specCodes.push(select);
          }
        })
      }
      this.$yAxios({
        url: this.$api.adopt.queryAdoptSkuList,
        data,
        loading: true
      }, info => {
        if(!info.length){
          this.$message({
            type: 'warning',
            message: '请先初始化sku'
          });
        }
        this.editing = null;
        this.tableData = info;
      });
    },
    editSku(row){
      if(!this.editing){
        this.editing = row;
        this.$set(row, 'edit', true);
      }else{
        this.$alert('存在其他正在编辑未保存的数据，请先保存其他数据再编辑本条数据', {
          confirmButtonText: '确定'
        });
      }
    },
    saveSku(row){
      this.$yAxios({
        url: this.$api.adopt.saveAdoptSku,
        data: row,
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: '保存成功'
        });
        this.queryList(false);
      })
    },
    delSku(row){
      this.$yAxios({
        url: this.$api.adopt.removeAdoptSku,
        data:{
          ids: [row.id]
        },
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.queryList(false);
      })
    },
    save(){
      return new Promise(resolve => {
        if(this.editing){
          this.$message({
            type: 'warning',
            message: '请保存正在编辑的SKU'
          });
          resolve(false);
        }
        resolve(true);
      });
    }
  }
}
</script>

<style scoped lang="less">
.adoptSKU{
  /deep/ .el-input-number{
    width: 100%;
  }
}
</style>